<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >大转盘中奖管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <!--顶部-->
        <el-row  style="min-height: 40px;display: flex;">
          <el-col  style="margin-bottom: 5px;" align="left">
            <el-input v-model="key" clearable style="width: 300px;" placeholder="输入关键词查询" class="kz_search">
              <el-button slot="append" type="primary"  @click="getStart()">搜索</el-button>
            </el-input>
          </el-col>
          <el-col  style="margin-bottom: 5px;" align="right">
            <el-button type="primary" @click="goHref('prize')" style="">中奖奖品设置</el-button>
            <el-button type="primary" @click="addShow()" style="">添加</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          border
          align="left"
          :data="tableData">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <!--<el-table-column-->
            <!--prop="id"-->
            <!--label="id">-->
          <!--</el-table-column>-->
          <el-table-column
            prop="prize_name"
            label="奖品名称">
          </el-table-column>
          <el-table-column
            prop="img"
            label="奖品封面">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.img"
                placement="bottom"
                trigger="hover">
                <div style="height: 300px;overflow-y: auto">
                  <img v-for="i in scope.row.img.split(',')" :src="i" alt="" width="300px" style="display: block">
                </div>
                <img slot="reference" :src="scope.row.img.split(',')[0]" alt="" width="60px" height="60px">
              </el-popover>
              <span v-if="!scope.row.img">无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="intro"
            label="奖品简介">
          </el-table-column>
          <el-table-column
            prop="rule"
            label="奖品使用规则">
          </el-table-column>
          <el-table-column
            prop="type"
            label="奖品类型">
            <template slot-scope="scope">
              {{ scope.row.type===1?'积分': scope.row.type===2?'实物': scope.row.type===3?'优惠券':'会员时长'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="coupon_type"
            label="优惠券类型" >
            <template slot-scope="scope">
              {{scope.row.type===3?(scope.row.coupon_type===1?'商品抵用券':'消费赠送券'):'/'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="奖品数量">
          </el-table-column>
          <el-table-column
            prop="send_number"
            label="奖品送出">
          </el-table-column>
          <el-table-column
            prop="residue_number"
            label="奖品剩余">
          </el-table-column>
          <el-table-column
            prop="shop_id"
            label="奖品适用类型">
            <template slot-scope="scope">
              {{ scope.row.type===3?(toType(scope.row.shop_id)):'通用'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="赠送天数">
          </el-table-column>
          <el-table-column
            label="有效期限"
            width="200">
            <template slot-scope="scope">
              <span style="margin-right: 5px;">{{formatDate(scope.row.start_time)}}</span>
              至
              <span style="margin-left: 5px;">{{formatDate(scope.row.over_time)}}</span>
            </template>
          </el-table-column>
          <!--<el-table-column-->
            <!--prop="start_time"-->
            <!--label="开始时间">-->
            <!--<template slot-scope="scope">-->
              <!--{{ formatDate(scope.row.start_time) }}-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column-->
            <!--prop="over_time"-->
            <!--label="到期时间">-->
            <!--<template slot-scope="scope">-->
              <!--{{ formatDate(scope.row.over_time) }}-->
            <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column
            prop="add_time"
            label="创建时间">
            <template slot-scope="scope">
              {{ formatDate(scope.row.add_time) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态">
            <template slot-scope="scope">
              {{ scope.row.state===1?'正常': scope.row.state===2?'禁用':'删除'}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作" width="90px">
            <template slot-scope="scope">
              <el-button @click="changeMes([scope.row.id],0)" style="color: red"  size="small" type="text">删除</el-button>
              <el-button @click="editShow(scope.row)"  style="" size="small" type="text">
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right;margin-bottom:70px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>

    <!--新增-->
    <el-dialog title="新增" :visible.sync="addVisible" width="500px" :append-to-body="false" :modal-append-to-body="false">
      <el-form :model="addData" :rules="addRules" ref="addData" style="text-align: left">
        <el-form-item label="奖品类型：" :label-width="formLabelWidth" prop="type">
          <el-select v-model="addData.type" placeholder="请选择">
            <el-option
              v-for="item in roleData"
              :key="item.role_Id"
              :label="item.role_Name"
              :value="item.role_Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券类型" :label-width="formLabelWidth" v-show="addData.type=='3'">
          <el-select v-model="addData.coupon_type" placeholder="请选择">
            <el-option
              v-for="item in GenderData"
              :key="item.Gender_Id"
              :label="item.Gender_Name"
              :value="item.Gender_Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="奖品名称：" :label-width="formLabelWidth" prop="prize_name" >
          <el-input  v-model="addData.prize_name"  clearable></el-input>
        </el-form-item>
        <el-form-item label="奖品封面：" :label-width="formLabelWidth" prop="img" >
          <my-upload @change="uploadChange" ref="my_upload_add"></my-upload>
        </el-form-item>
        <el-form-item label="奖品简介：" :label-width="formLabelWidth" prop="intro" >
          <el-input  v-model="addData.intro"  clearable></el-input>
        </el-form-item>
        <el-form-item label="天数：" :label-width="formLabelWidth" prop="money" >
          <el-input  v-model="addData.money"  clearable></el-input>
        </el-form-item>
        <el-form-item label="使用规则：" :label-width="formLabelWidth" prop="rule" >
          <el-input  v-model="addData.rule"  clearable></el-input>
        </el-form-item>
        <el-form-item label="奖品数量：" :label-width="formLabelWidth" prop="number" >
          <el-input v-model="addData.number"   clearable></el-input>
        </el-form-item>
        <el-form-item label="开始时间：" :label-width="formLabelWidth" prop="start_time">
          <el-date-picker
            v-model="addData.start_time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到期时间：" :label-width="formLabelWidth" prop="over_time">
          <el-date-picker
            v-model="addData.over_time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="店铺id：" :label-width="formLabelWidth" prop="shop_id" v-show="addData.type=='3'">
          <el-select v-model="addData.shop_id" placeholder="请选择">
            <el-option
              v-for="item in dpData"
              :key="item.shop_id"
              :label="item.shop_name"
              :value="item.shop_id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd('addData')">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑-->
    <el-dialog title="编辑" :visible.sync="editVisible" width="500px" :modal-append-to-body="false">
      <el-form :model="editData" :rules="editRules" ref="editData" style="text-align: left">
        <el-form-item label="奖品类型：" :label-width="formLabelWidth" prop="type">
          <el-select v-model="editData.type" placeholder="请选择">
            <el-option
              v-for="item in roleData"
              :key="item.role_Id"
              :label="item.role_Name"
              :value="item.role_Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券类型" :label-width="formLabelWidth" prop="coupon_type"v-show="editData.type=='3'">
          <el-select v-model="editData.coupon_type" placeholder="请选择">
            <el-option
              v-for="item in GenderData"
              :key="item.Gender_Id"
              :label="item.Gender_Name"
              :value="item.Gender_Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="奖品名称：" :label-width="formLabelWidth" prop="prize_name" >
          <el-input  v-model="editData.prize_name"  clearable></el-input>
        </el-form-item>
        <el-form-item label="奖品封面：" :label-width="formLabelWidth" prop="img" >
          <my-upload @change="uploadChangeEdit" ref="my_upload"></my-upload>
        </el-form-item>
        <el-form-item label="奖品简介：" :label-width="formLabelWidth" prop="intro" >
          <el-input  v-model="editData.intro"  clearable></el-input>
        </el-form-item>
        <el-form-item label="使用规则：" :label-width="formLabelWidth" prop="rule" >
          <el-input  v-model="editData.rule"  clearable></el-input>
        </el-form-item>
        <el-form-item label="奖品数量：" :label-width="formLabelWidth" prop="number" >
          <el-input v-model="editData.number"   clearable></el-input>
        </el-form-item>
        <el-form-item label="开始时间：" :label-width="formLabelWidth" prop="start_time">
          <el-date-picker
            v-model="editData.start_time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到期时间：" :label-width="formLabelWidth" prop="over_time">
          <el-date-picker
            v-model="editData.over_time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit('editData')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import MyUpload from '../../components/MyUpload'
  export default {
    name: "Winning",
    components:{
      MyUpload
    },
    mounted() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.getStart()
      this.getShop()
    },
    data() {
      return {
        page: 1,
        contentVisible:false,
        contentValue:'',
        serchValue:'',
        addSelectValue:0,
        dpData:[],
        tableData: [],
        addTimeData:[],
        editTimeData:[],
        pageSize: 10,
        currentPage: 1,
        key:'',

        selectkey: '',
        dataTotal: 0,
        multipleSelection: [],
        formLabelWidth: '100px',
        addVisible: false,
        GenderData:[
          {
            Gender_Id : 1,
            Gender_Name: '商品抵用券'
          },
          {
            Gender_Id : 2,
            Gender_Name: '消费赠送券'
          },
        ],
        typeData:[

          ],
        roleData:[
          {
            role_Id : 1,
            role_Name: '积分'
          },
          {
            role_Id : 2,
            role_Name: '实物'
          },
          {
            role_Id : 3,
            role_Name: '优惠券'
          },
          {
            role_Id : 4,
            role_Name: '会员时长'
          },
        ],
        addData: {
          id:'',
          prize_name:'',
          img:'',
          intro:'',
          rule:'',
          number:'',
          money:'',
          start_time:'',
          over_time:'',
          shop_id:'',
          coupon_type:'',
        },
        addRules: {
          // type: [
          //   {required: true, message: '请输入', trigger: 'blur'}
          //
          // ],
          // shop_id: [
          //   {required: true, message: '请选择', trigger: 'blur'}
          //
          // ],
          // coupon_type: [
          //   {required: true, message: '请输入', trigger: 'blur'}
          //
          // ],
          prize_name: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          img: [
            {required: true, message: '请输入', trigger: 'change'}
          ],
          intro: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          money: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          rule: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          start_time: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          over_time: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],

        },
        editVisible: false,
        editData: {
          type:'',
          money:'',
          coupon_type:'',
          id:'',
          prize_name:'',
          img:'',
          intro:'',
          rule:'',
          number:'',
          start_time:'',
          over_time:'',
          shop_id:'',


        },
        editRules: {
          // type: [
          //   {required: true, message: '请输入', trigger: 'blur'}
          //
          // ],
       //   coupon_type: [
       //      {required: true, message: '请输入', trigger: 'blur'}
       //
       //    ],
          prize_name: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          img: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          intro: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          money: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          rule: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          start_time: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          over_time: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],

        },
      }
    },
    methods: {
      // 获取数据
      getStart() {
        let thi = this
        const por = {
          page:thi.page,
          pageSize:thi.pageSize,
          key:thi.key,
        }
        thi.mySelectAll('prizeList', por).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //获取权限
      getShop() {
        let thi = this
        const por = {
          page: thi.page,
          pageSize: 9999,
        }
        thi.mySelectAll('shopListW', por).then(function (value) {
          thi.dpData = value.data
        })
      },
      // 权限转换
      toType(data){
        for(let i=0;i<this.dpData.length;i++){
          if(this.dpData[i].shop_id==data){
            return this.dpData[i].shop_name
          }
        }
        return
      },
      formatDate (date) {
        if(!date){
          return "无"
        }
        Date.prototype.toLocaleString = function() {
          return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate()+ " " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
        };
        var unixTimestamp = new Date(date * 1000)
        return unixTimestamp.toLocaleString();
      },
      // 显示新增
      addShow() {
        this.addVisible = true
        this.addData = {}
        this.addSelectValue=0
        this.$nextTick(function () {
          this.$refs.my_upload_add.medioData=[]
        })

      },
      //提交新增
      submitAdd(formName) {
        let thi = this
        console.log(thi.addData)
        thi.addData.id = thi.$store.state.login.user.id
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            thi.addData.start_time = thi.addData.start_time / 1000
            thi.addData.over_time = thi.addData.over_time / 1000
            thi.mySubmit('addPrize', thi.addData).then(function (code) {
              thi.addVisible = false
              thi.getStart()
            })
          } else {
            return false;
          }
        });
      },


      //显示编辑
      editShow(data){
        let thi=this
        console.log(data)
        this.editData = JSON.parse(JSON.stringify(data))
        this.editData.id = data.id
        this.editData.start_time = data.start_time * 1000
        this.editData.over_time = data.over_time * 1000
        this.editVisible = true
        this.$nextTick(function () {
                thi.$refs.my_upload.medioData=data.img.split(',')
              })
      },
      //提交编辑
      submitEdit(formName) {
        let thi = this
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            thi.editData.id=thi.editData.id
            thi.editData.start_time = thi.editData.start_time / 1000
            thi.editData.over_time = thi.editData.over_time / 1000
            thi.mySubmit('exitPrize', thi.editData).then(function (code) {
              if (code == 200) {
                thi.editVisible = false
                thi.getStart()
              }
            })
          } else {
            return false;
          }
        });
      },

      uploadChange(data){
        console.log(data)
        this.addData.img = data;
      },
      //图片上传完成的钩子
      uploadChangeEdit(data){
        console.log(data)
        this.editData.img = data;
      },
      submitState(id, state) {
        let thi = this
        const por = {
          id: id,
          state: state,
        }
        thi.mySubmit('editStateE', por).then(function (code) {
          if (code == 200) {
            thi.getStart()
          }
        })
      },
      //状态改变提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }
        let thi = this
        thi.$confirm('此操作将'+caozuo + heeh+'信息', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.submitState(id, state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //状态改变


      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //批量状态改变合并ID
      deletesel() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的分类!'
          });
          return
        } else {
          var ids = [];
          this.multipleSelection.forEach(function (avalue, aindex, aarr) {
            ids.push(avalue.id)
          });
          this.changeMes(ids, 0)
        }
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getStart()
      },
      //跳转页面
      handleCurrentChange(val) {
        this.currentPage = val
        this.getStart()
      },
    }
  }
</script>

<style scoped>
  .admin-body {
    width: 100%;
  }
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>
